<template>
    <div style="width: 650px;height: 450px" ref="proBubble">

    </div>
</template>

<script>
  require('echarts/map/js/china')
  import geoCoordMapData from './geocoordMap'
  export default {
    name: 'projectBubble',
    data () {
      return {
        renderData: this.provinceList
      }
    },
    mixins: [geoCoordMapData],
    mounted () {
      this.init()
    },
    watch: {
      renderData () {
        this.init()
      },
      provinceList () {
        this.renderData = this.provinceList
      },
      cityList () {
      }
    },
    props: {
      provinceList: {
        default: () => [],
        type: Array
      },
      cityList: {
        default: () => [],
        type: Array
      },
      colorType: {
        default: '1',
        type: String
      }
    },
    methods: {
      init () {
        let _data = this.renderData
        let geoCoordMap = this.geocoordMap
        let convertData = function (data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              })
            }
          }
          return res
        }
        let myChart = this.$echarts.init(this.$refs.proBubble)
        let option = {
          tooltip: {
            show: true,
            enterable: true,
            trigger: 'item',
            backgroundColor: 'rgba(9, 37, 56, 0.5)',
            extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
          },
          backgroundColor: '',
          // 标题
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          // 地理坐标系组件
          geo: {
            map: 'china',
            top: 0,
            left: '10%',
            right: '10%',
            roam: true,
            silent: true,
            scaleLimit: {
              min: 1,
              max: 10
            },
            label: {
              // true会显示城市名
              normal: {
                show: false,
                color: 'rgba(242,242,242,.3)'
              },
              emphasis: {
                show: false,
                color: 'rgba(242,242,242,.3)'
              }
            },
            itemStyle: {
              // 地图背景色
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#187CBB'
                }, {
                  offset: 1,
                  color: '#1896A3'
                }]),
                borderColor: '#0c3034'
              },
              // 悬浮时
              emphasis: {
                areaColor: ''
              }
            }
          },
          // 系列列表
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(_data),
              symbolSize: function (val) {
                if (val[2] > 0 && val[2] < 10) {
                  return 10
                } else if (val[2] >= 10 && val[2] < 50) {
                  return 20
                } else if (val[2] >= 50 && val[2] < 200) {
                  return 30
                } else if (val[2] >= 200) {
                  return 40
                }
              },
              label: {
                normal: {
                  formatter: (param) => {
                  },
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(25, 100, 150, 0.5)',
                  shadowOffsetY: 5,
                  color: this.colorType
                }
              },
              tooltip: {
                formatter: (param) => {
                  return param.name + ':' + param.value[2]
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        myChart.on('georoam', () => {
          let params = myChart.getOption()
          if (params.geo[0].zoom > 2) {
            // alert('放大')
            this.renderData = this.cityList
          } else {
            // alert('缩小')
            this.renderData = this.provinceList
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
